<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>${article.title}</title>

    <!--制作的图标，使用href关联，仅仅需要更改href的内容  -->
    <link rel="stylesheet" type="text/css" href="/static/client/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/static/client/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<%-- 公共部分--%>
<jsp:include page="comonent/top.jsp"/>

<div class="content whisper-content leacots-content details-content">
    <div class="cont w1000">
        <div class="whisper-list">
            <div class="item-box">
                <div class="review-version">
                    <div class="form-box">
                        <div class="article-cont">
                            <div class="title">
                                <h3>${article.title}</h3>
                                <p class="cont-info"><span class="data"><fmt:formatDate value="${article.createtime}"
                                                                                        pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></span><span
                                        class="types">散文札记</span></p>
                            </div>
                            ${article.content}
                            <div class="btn-box">
                                <button class="layui-btn layui-btn-primary">上一篇</button>
                                <button class="layui-btn layui-btn-primary">下一篇</button>
                            </div>
                        </div>
                        <div class="form">
                            <form class="layui-form" action="">
                                <input type="hidden" id="token" value="${token}" name="token">
                                <input type="hidden" id="articleid" value="${article.uuid}" name="articleid">
                                <div class="layui-form-item layui-form-text">
                                    <div class="layui-input-block">
                                        <textarea name="content" placeholder="既然来了，就说几句" lay-verify="required" lay-verType="tips"  class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block" style="text-align: right;">
                                        <button class="layui-btn" lay-submit lay-filter="formComment">確定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="volume">
                        全部留言 <span>10</span>
                    </div>
                    <div class="list-cont" id="view">

                        <%--                        <div class="cont">--%>
                        <%--                            <div class="img">--%>
                        <%--                                <img src="/static/client/img/header.png" alt="">--%>
                        <%--                            </div>--%>
                        <%--                            <div class="text">--%>
                        <%--                                <p class="tit"><span class="name">吳亦凡</span><span class="data">2018/06/06</span></p>--%>
                        <%--                                <p class="ct">敢问大师，师从何方？上古高人呐逐一地看完你的作品后，我的心久久--%>
                        <%--                                    不能平静！这世间怎么可能还有如此精辟的作品？我不敢相信自己的眼睛。自从改革开放以后，我就以为再也不会有任何作品能打动我，没想到今天看到这个如此精妙绝伦的作品好厉害！</p>--%>
                        <%--                            </div>--%>
                        <%--                        </div>--%>
                    </div>
                </div>
            </div>
        </div>
        <div id="demo" style="text-align: center;"></div>
    </div>
</div>
<script type="text/html" id="laytplCont">
    {{# layui.each(d,function(index,item){ }}
    <div class="cont">
        <div class="img" >
            {{# if(item.photo){ }}
            <img src="{{item.photo}}" alt=""  width="40px"  height="40px" >
            {{# } else { }}
            <img src="/static/client/img/header.png" alt="">
            {{# } }}
        </div>
        <div class="text">
            <p class="tit"><span class="name">{{item.username}}</span><span class="data">{{item.createtime}}</span></p>
            <p class="ct">{{item.content}}</p>
        </div>
    </div>
    {{# }); }}
    {{# if(d.length ===0){}}
    <h3>暂无留言</h3>
    {{# } }}
</script>
<div class="footer-wrap">
    <div class="footer w1000">
        <div class="qrcode">
            <img src="/static/client/img/erweima.jpg">
        </div>
        <div class="practice-mode">
            <img src="/static/client/img/down_img.jpg">
            <div class="text">
                <h4 class="title">我的联系方式</h4>
                <p>微信<span class="WeChat">1234567890</span></p>
                <p>手机<span class="iphone">1234567890</span></p>
                <p>邮箱<span class="email">1234567890@qq.com</span></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/client/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '/static/client/js/util/'
    }).use(['element', 'laypage', 'form', 'menu', 'laytpl', 'jquery'], function () {
        element = layui.element, laypage = layui.laypage, form = layui.form, menu = layui.menu;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        menu.init();
        menu.submit();


        form.on('submit(formComment)', function(data){
            $.ajax({
                url: "/comment/sendComment",
                data:data.field,
                dataType: "JSON",
                type: "POST",
                success: function (res) {
                    if (res.success){
                        data.form.reset();
                        loadComment(1, $("#articleid").val());
                    }
                    layer.msg(res.content);
                }, error: function () {
                    layer.msg("服务器错误");
                }
            });


            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });



        loadComment(1, $("#articleid").val());

        function loadComment(pageIndex, uuid) {
            $.ajax({
                url: "/comment/pageList",
                data: {pageIndex: pageIndex, uuid: uuid, token: $("#token").val()},
                dataType: "JSON",
                type: "GET",
                success: function (res) {
                    console.log(res);
                    if (res.success) {
                        let page = res.data;
                        laytpl($("#laytplCont").html()).render(page.dataList, function (html) {
                            $("#view").html(html);
                        });
                        //执行一个laypage实例
                        laypage.render({
                            curr: page.pageIndex,
                            limit: page.pageSize,
                            elem: 'demo' //注意，这里的 test1 是 ID，不用加 # 号
                            , count: page.count //数据总数，从服务端得到
                            , jump: function (obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if (!first) {
                                    loadComment(obj.curr, uuid);
                                }
                            }
                        });

                    }
                }, error: function () {
                    $("#view").html("<h3>服务器异常加载</h3>");
                }
            });
        }

    })
</script>
</body>
</html>